<template>
	<view class="_hot_main_course">
		<view class="top-img"></view>
		<view class="_content_box">
			<block v-for="hot in hotList" :key="hot.id">
				<view class="u-flex u-flex-between u-flex-items-center u-m-t-32" @click="toInfo(hot)">
					<view class="befor-title u-flex u-flex-items-center u-m-r-16">
						<view class="_dot"></view>
						<view class="f-s-14 f-w-b u-m-l-16 u-line-1">{{ hot.title }}</view>
					</view>
					<view class="domain_tag">{{ hot.domain?.name }}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	
	const props = defineProps({
		hotList: Array
	})
	
	const toInfo = (e)=>{
		uni.navigateTo({
			url: '/subPackages/class/main_detail?id=' + e.id
		})
	}
</script>

<style lang="scss">
	._hot_main_course {
		background-color: #fff;
		border-radius: 0 0 16rpx 16rpx;

		.top-img {
			border-radius: 8px;
			width: 100%;
			height: 80rpx;
			background: url(https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/08/16/png/image@1x_20240816142642A052.png) no-repeat;
			background-size: 100% 100%;

		}

		._content_box {
			padding: 0 40rpx 40rpx;
			border-radius: 0 0 16rpx 16rpx;

			._dot {
				min-width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background-color: #EB3533;
			}


			.domain_tag {
				min-width: max-content;
				background-color: #FEEAEB;
				color: #EB3533;
				font-size: 10px;
				padding: 10rpx 16rpx;
				border-radius: 12rpx;
				font-weight: 500;
			}

		}
	}
</style>